<!--
 * @Author: wangjianwhy wangjianwhy@sina.com
 * @Date: 2024-10-16 14:34:00
 * @LastEditors: wangjianwhy wangjianwhy@sina.com
 * @LastEditTime: 2024-10-23 11:04:29
 * @FilePath: \my-vue3-appg:\vscode-work\tlo-shopping\src\components\product\ShopStore.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="store-cards">
        <div class="store-card"  v-for="(store, index) in storeValues" :key="index">
            <div class="store-title">
                <img :src="store.storeIcon" width="50" height="50" @click="enterShopStore" />
                <div class="store-name" @click="enterShopStore">
                    <div>{{ truncateText(store.name, 12) }}</div>
                    <span :class="{'no-score': store.storeScore==0, 'score': store.storeScore>0}">{{ store.storeScore>0 ?  store.storeScore+'分' : '暂无评分'}}</span>
                    <span class="follow-with">{{ store.storeFollow }}人关注</span>
                </div>
                <div class="store-btn">
                    <button @click="bespeak">预约咨询</button>
                </div>
            </div>
            <div class="store-address" @click="invokeMap">
                <img src="/src/assets/icons/svg/nav.svg" />
                <span>{{ truncateText(store.storeAddress, 20) }} ❯</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { truncateText } from '@/components/util/tools.js';

const storeValues = ref([
    {
        name: '冠网科技',
        storeId: 1,
        storeIcon: '/src/assets/lunbo/image1.jpeg',
        storeAddress: '广东省广州市番禺区莲花大道北番禺节能科技园',
        storeScore: 4.5,
        storeFollow: 220
    },{
        name: '冠网科技',
        storeId: 1,
        storeIcon: '/src/assets/lunbo/image1.jpeg',
        storeAddress: '广东省广州市番禺区莲花大道北番禺节能科技园',
        storeScore: 0.0,
        storeFollow: 220
    },{
        name: '冠网科技',
        storeId: 1,
        storeIcon: '/src/assets/lunbo/image1.jpeg',
        storeAddress: '广东省广州市番禺区莲花大道北番禺节能科技园',
        storeScore: 4.5,
        storeFollow: 220
    },{
        name: '冠网科技',
        storeId: 1,
        storeIcon: '/src/assets/lunbo/image1.jpeg',
        storeAddress: '广东省广州市番禺区莲花大道北番禺节能科技园',
        storeScore: 4.5,
        storeFollow: 220
    },{
        name: '冠网科技',
        storeId: 1,
        storeIcon: '/src/assets/lunbo/image1.jpeg',
        storeAddress: '广东省广州市番禺区莲花大道北番禺节能科技园',
        storeScore: 4.5,
        storeFollow: 220
    },{
        name: '冠网科技',
        storeId: 1,
        storeIcon: '/src/assets/lunbo/image1.jpeg',
        storeAddress: '广东省广州市番禺区莲花大道北番禺节能科技园',
        storeScore: 4.5,
        storeFollow: 220
    },{
        name: '冠网科技',
        storeId: 1,
        storeIcon: '/src/assets/lunbo/image1.jpeg',
        storeAddress: '广东省广州市番禺区莲花大道北番禺节能科技园',
        storeScore: 4.5,
        storeFollow: 220
    },{
        name: '冠网科技',
        storeId: 1,
        storeIcon: '/src/assets/lunbo/image1.jpeg',
        storeAddress: '广东省广州市番禺区莲花大道北番禺节能科技园',
        storeScore: 4.5,
        storeFollow: 220
    },{
        name: '冠网科技',
        storeId: 1,
        storeIcon: '/src/assets/lunbo/image1.jpeg',
        storeAddress: '广东省广州市番禺区莲花大道北番禺节能科技园',
        storeScore: 4.5,
        storeFollow: 220
    },{
        name: '冠网科技',
        storeId: 1,
        storeIcon: '/src/assets/lunbo/image1.jpeg',
        storeAddress: '广东省广州市番禺区莲花大道北番禺节能科技园',
        storeScore: 4.5,
        storeFollow: 220
    }
]);


const enterShopStore = () => {
    alert("商店名称");
}

const bespeak = () => {
    alert("预约商铺");
}

const invokeMap = () => {
    alert("调出地图，从底部弹出选项<百度地图/高德地图/腾讯地图/取消>");
}

</script>

<style scoped>
.store-cards {
    width: 95%;
    margin: auto;
}
.store-card {
    width: 95%;
    height: 75px;
    border-radius: 10px;
    background-color: white;
    margin: 10px auto;
    font-size: 14px;
    padding: 10px;
}
.store-title {
    height: 50px;
}
.store-title img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    float: left;
    cursor: pointer;
}
.store-title .store-name {
    width: 58%;
    float: left;
    text-align: left;
    cursor: pointer;
}
.store-name div {
    width: 100%;
    text-align: left;
    font-weight: bold;
    margin: auto 10px;
}
.store-name .no-score {
    font-size: 10px;
    background-color: #d9d9d9;
    border-radius: 15px;
    padding: 1px 3px;
    margin: auto 10px;
}
.store-name .score {
    font-size: 12px;
    border-radius: 15px;
    padding: 1px 3px;
    margin: auto 10px;
    font-weight: bold;
    color: blue;
}
.store-name .follow-with {
    font-size: 10px;
    margin: auto 10px;
}

.store-title .store-btn {
    width: 92px;
    float: left;
    padding-top: 10px;
}
.store-title .store-btn button {
    width: 100%;
    height: 30px;
    padding-top: 5px;
    float: left;
    border-radius: 50px;
    background-color: #7f6000;
    color: white;
}
.store-address {
    height: 20px;
    margin-top: 5px;
    cursor: pointer;
}
.store-address img {
    width: 20px;
    height: 20px;
    float: left;
    margin-top: 1px;
}
.store-address span {
    font-size: 12px;
    float: left;
    margin-left: 10px;
    margin-top: 2px;
}
</style>
